<template>
  <div class="white-container">
    <div class="btn">
      <a-button type="primary" @click="handleControl">
        <template #icon><PlusOutlined /></template>
        班级管理
      </a-button>
    </div>
    <div class="classList">
      <div class="className" v-for="item in state.classList">
        {{ item?.name }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useTeacherOrgList } from "@/api";
import { useAuthParse } from "@/api/auth/auth";
import { authRedict } from "@/utils/cas";
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  params: {
    operatorCode: "",
  },
  classList: [],
});

const getData = async () => {
  let { result } = await useTeacherOrgList(state.params);
  state.classList = result || [];
};
const handleControl = () => {
  router.push({
    name: "WhiteRecordControl",
    query: {
      code: state.params.operatorCode,
    },
  });
};

onBeforeMount(() => {
  if (!sessionStorage.getItem("tcode")) {
    authRedict("http://mjkq.cqzhxy.cn:18088/m/teacher/whiteRecord");
  }
});

const initState = () => {
  if (!sessionStorage.getItem("tcode")) {
    useAuthParse("http://mjkq.cqzhxy.cn:18088/m/teacher/whiteRecord")
      .then(({ success, result: { code, name } }) => {
        if (success) {
          state.params.operatorCode = code;
          sessionStorage.setItem("tcode", code);
        }
      })
      .then(() => getData());
  } else {
    state.params.operatorCode = sessionStorage.getItem("tcode");
    getData();
  }
};

onMounted(() => {
  initState();
  document.title = "班级管理";
});
</script>
<style scoped lang="less">
.white-container {
  padding: 10px 20px;
  .btn {
    display: flex;
    justify-content: flex-end;
  }
  .classList {
    max-height: calc(100vh - 64px);
    margin-top: 10px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    .className {
      height: 56px;
      line-height: 56px;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
